<template>
    <div class="newmusic">
        <div class="hd">
            <!-- 分类导航 -->
            <TypeNav :typeitem="typeitem" @typeItemClick="typeItemClick"/>
            <div class="btn">
                <el-button type="info" size="mini" icon="el-icon-video-play" @click="playAll">播放全部</el-button>
            </div>
        </div>
        <!-- 歌曲列表 -->
        <div class="bd">
             <el-table :data="musiclist" stripe style="width: 100%" :show-header="false" empty-text="数据加载中~" @row-dblclick="playMusic">
                <el-table-column width="80">
                    <template slot-scope="{row,$index}">
                        <span class="iconfont" :class="isPlaying ? 'icon-voice':'icon-jingyin_laba'" v-if="row.id == nowSongDetail.id"></span>
                        <span v-else>{{$index | formatIndex}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="album.picUrl" label="封面" width="100">
                    <template slot-scope="{row}">
                        <div class="cover">
                            <img v-lazy="row.album.picUrl" alt=""/>
                            <div class="mask">
                                <span class="iconfont icon-play1"></span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="歌曲" width="250" :show-overflow-tooltip="true">
                    <template slot-scope="{row}">
                        <span>
                            {{row.name}}
                            <i class="iconfont icon-mv" v-if="row.mvid != 0"></i>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="artists[0].name" label="歌手" width="200" :show-overflow-tooltip="true">
                    <template slot-scope="{row}">
                        <span class="sthover">
                            {{row.artists[0].name}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="专辑">
                    <template slot-scope="{row}">
						<span  class="sthover">
							{{ row.album.name }}
						</span>
					</template>
                </el-table-column>
                <el-table-column prop="duration" label="时长">
					<template v-slot="scope">
						<span>
							{{ scope.row.duration | formatDuration }}
						</span>
					</template>
				</el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import TypeNav from './TypeNav.vue'
import { mapState } from 'vuex';
export default {
    name: "",
    components: { TypeNav },
    data() {
        return {
            typeitem: [
                { type: "全部", code: "0" },
                { type: "华语", code: "7" },
                { type: "欧美", code: "96" },
                { type: "日本", code: "8" },
                { type: "韩国", code: "16" },
            ],
            code:0,
            musiclist:[]
        };
    },
    filters: {
		// 格式化索引
		formatIndex(index) {
			if (index < 9) {
				return "0" + (index + 1);
			} else return index + 1;
		},
	},
    created() {
        this.getNewMusicBy();
    },
    methods: {
        async getNewMusicBy(){
            let resMusic = await this.$API.newsongs.getNewSongs(this.code);
            if(resMusic.code == 200){
                this.musiclist = resMusic.data
            }
        },
        typeItemClick(code){
            // 获取歌曲信息
            this.code = code;
            this.getNewMusicBy();
        },
        // 点击播放全部歌曲
        async playAll(){
            let formatSongList = [];
			this.musiclist.forEach(song => {
				formatSongList.push(this.getSongInfo(song));
			});
            this.$store.dispatch("addAllSong", formatSongList);
            // 默认播放第一首歌曲
            let isCheck = await this.$API.playmusic.checkMusic(formatSongList[0].id);
            if(isCheck.success){
            // 根据歌曲的id,获取歌曲的详情
            let songMessage = await this.$API.playmusic.getSongUrl(formatSongList[0].id);
            if(songMessage.code == 200){
                // 将歌曲的url存储在仓库
                    this.$store.dispatch('saveSongUrl',songMessage.data[0].url);
                    // 更新播放状态
                    this.$store.dispatch('changePlayState',true);
                    // 提交vuex保存当前歌曲的详情
                    this.$store.dispatch('saveSongDetail',formatSongList[0]);
            }
            }
        },
        // 获取歌曲的信息
        getSongInfo(song) {
			let nowSongInfo = { al: {}, ar: [{}] };
			nowSongInfo.id = song.id; //歌曲id
			nowSongInfo.name = song.name; //歌曲名
			nowSongInfo.dt = song.duration; //歌曲时长
			nowSongInfo.al.picUrl = song.album.picUrl; //专辑封面
			nowSongInfo.al.name = song.album.name; //专辑名
			nowSongInfo.al.id = song.album.id; //专辑id
			nowSongInfo.ar[0].name = song.artists[0].name; //歌手名
			nowSongInfo.ar[0].id = song.artists[0].id; //歌手id
			if (song.mvid != 0) {
				nowSongInfo.mv = song.mvid; //mv的id
			}
			return nowSongInfo;
		},
        // 双击播放当前音乐
        async playMusic(song){
        try {
            // 检查歌曲是否可用
            let isCheck = await this.$API.playmusic.checkMusic(song.id);
            if(isCheck.success){
                // 根据歌曲的id,获取歌曲的详情
            let songMessage = await this.$API.playmusic.getSongUrl(song.id);
            if(songMessage.code == 200){
                    // 将歌曲的url存储在仓库
                    this.$store.dispatch('saveSongUrl',songMessage.data[0].url);
                    // 更新播放状态
                    this.$store.dispatch('changePlayState',true);
                    // 提交vuex保存当前歌曲的详情
                    this.$store.dispatch('saveSongDetail',this.getSongInfo(song));
                    // 更新vuex添加到播放列表
                    this.$store.dispatch('addPlayinglist',this.getSongInfo(song));

            }else{
                    this.$message({
                    type:'error',
                    message:'歌曲获取失败，请重试'
                })

            }
            }else{
                this.$message({
                    type:'error',
                    message:'不好意思,这首歌需要特权'
                })
            }
        } catch (error) {
            this.$message({
            type:'error',
            message:'亲爱的,暂无版权'
            })
        }  
        },
    },
    computed:{
        ...mapState({
            // 获取当前播放的状态
            isPlaying: (state) => {
                return state.playmusic.isPlaying;
            },
            // 获取当个播放的音乐的信息
            nowSongDetail: (state) => {
                return state.playmusic.nowSongDetail;
            },
        })
    }
}
</script>
<style lang="less" scoped>
    .hd{
        .btn{
            margin-top: 5px;
        }
    }
    .bd{
        
        .cover{
            position: relative;
            width: 80px;
            height: 80px;
            img{
                width: 100%;
            }
            .mask{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
		        cursor: pointer;
                .iconfont{
                    font-size: 22px;
                    &:hover{
                        color: var(--themeColor);
                    }
                }
            }
        }
        .icon-mv{
            font-size: 22px;
            color: var(--themeColor);
            cursor: pointer;
            padding: 5px 0 0 5px;
        }
    }
.icon-voice,
.icon-jingyin_laba {
	color: var(--themeColor);
}
</style>